<template>
    <div class="user-info">
        <div class="info">
            <div class="name">
                <span>{{user.name}}</span>
                <i class="iconfont icon-yonghu icon"/>
            </div>
            <div class="sex">
                性别: {{user.gender}}
            </div>
            <div class="email">
                邮箱: {{user.email}}
            </div>
            <div class="sign"> {{user.sign}} </div>
        </div>
        <div class="avatar">
            <el-image :src="user.avatar" fit="scale-down" 
            :preview-src-list="[getBigPic(user.avatar)]"></el-image>
        </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'

@Component({})
export default class UserInfoCom extends Vue {

    // 当前显示的用户信息
    @Prop({type: Object, default:{}, required: true})
    public user:any

    // 从小图解析出大图路径
    public getBigPic(smallPic:string){
        const prefix =  smallPic.split('_')[0]
        const arr = smallPic.split('.')
        const suffix = arr[arr.length - 1]
        return prefix + '.' + suffix
    }

}
</script>

<style lang="less" scoped>
@import '../css/iconfont.less';
@import '../css/index.less';
.user-info{
    display: flex;
    padding: 10px;
    .info{
        flex: 1;
        color: #999999;
        font-size: 12px;
        .name{
            color: #000;
            font-size: 16px;
            .icon{
                color: @theme-color;
                padding: 0px 5px;
            }
        }
        & > div~div{
            padding: 2px 0;
        }
        .sign{
            color: @theme-color;
        }
    }
    .avatar{
        width: 100px;
        padding: 0 10px;
        img{
            width: 100px;
            object-fit: scale-down;
        }
    }
}
</style>